<template>
  <div>
    <Title :title="title"></Title>
    <div style="height:150px" ref="box"></div>
  </div>
</template>
<script setup>

import Title from './Title.vue';
import moment  from 'moment';
import {get} from '@/utils/request.js'
import { ref, onMounted } from 'vue';
import { Line } from '@antv/g2plot';

const title = ref('实时颗粒物');
const box = ref(null);
let temData = ref([]);
const loadLine = () => {
  const line = new Line(box.value, {
    data:temData.value,
    xField: 'time',
    yField: 'temperature',
    xAxis: {
      label: {
        style: {
          fill: 'white'
        }
      }
    },
    yAxis: {
      label: {
        style: {
          fill: 'white'
        }
      }
    },
    label: {
      style: {
        fill: "white",
      }
    },
    point: {
      size: 5,
      shape: 'diamond',
      style: {
        fill: 'white',
        stroke: '#5B8FF9',
        lineWidth: 2,
      },
    },
    animation: {
      appear: {
        animation: 'wave-in',
        duration: 3000,
      },
    },
    smooth:true,
    tooltip: { showMarkers: false },
    state: {
      active: {
        style: {
          shadowBlur: 4,
          stroke: '#000',
          fill: 'red',
        },
      },
    },
    interactions: [{ type: 'marker-active' }],
  });
  line.render();
};
const getTemData = async ()=>{
  let response =await get('dashboard/pageQueryTodayData',{
    page:1,
    pageSize:100
  });
  response.data.list.forEach((item,index,arr)=>{
      //
      arr[0].temperature=15.4;
      item.time=moment(item.insert_time).format('HH:mm')
  });
  let temp=[];
  for(var i=0;i<response.data.list.length;i++){
      if(i%8==0){
         temp.push(response.data.list[i])
      }
  }
  temData.value =temp;
}
onMounted(async() => {
  await getTemData();
  loadLine();
})

</script>
<style scoped lang="less"></style>